<template>
  <section v-loading="loading" class="cms-body">
        <div class="cms-list-header flex-between" style="display: -webkit-box;">
            <el-button type="primary"
             icon="el-icon-plus"
              @click="routerLink('/user/save','save',0)"
              v-perms="'/user/save'"

              >添加</el-button>
          <el-button type="success"
                     icon="el-icon-plus"
                     @click="dialogVisible = true"
          >导入</el-button>
            <!-- 右操作 -->
             <div>
                 <cms-input  label="用户名" v-model="params.queryUsername"></cms-input>
                <cms-input  label="电子邮箱"  v-model="params.queryEmail"></cms-input>
                <el-button @click="query">查询</el-button>
            </div>
        </div>
        <!-- 表格 -->
         <el-table :data="tableData" stripe style="width: 100%" @selection-change="checkIds">
             <el-table-column type="selection" width="65" align="right"></el-table-column>
              <el-table-column prop="id" label="ID" width="50" align="center"></el-table-column>
              <el-table-column prop="username" label="用户名" width="180" align="left"></el-table-column>
              <el-table-column prop="groupName" label="用户组"  align="center"> </el-table-column>
              <el-table-column prop="lastLoginTime" label="最后登录时间"   align="center"> </el-table-column>
              <el-table-column prop="loginCount" label="登录次数"  align="center"> </el-table-column>
              <el-table-column prop="" label="状态"   align="center">
                <div slot-scope="scope">
                  <span v-if='!scope.row.disabled'>启用</span>
                  <span v-else class="red">禁用</span>
                </div>
              </el-table-column>
              <el-table-column prop="name" label="操作"   align="center">
                <div slot-scope="scope">
                    <cms-button type="edit" @click.native="routerLink('/user/update','update',scope.row.id)"
                        v-perms="'/user/update'"

                    ></cms-button>
                     <cms-button type="delete" @click.native="deleteBatch($api.memberDelete,scope.row.id)"
                       v-perms="'/user/delete'"
                     ></cms-button>
                </div>
               </el-table-column>
         </el-table>
         <!-- 表格底部 -->
        <div class="cms-list-footer">
                <div class="cms-left">
                  <el-button :disabled="disabled" @click="deleteBatch($api.memberDelete,ids)"
                    v-perms="'/user/delete'"

                  >批量删除</el-button>
                </div>
                <!-- cms分页组件 -->
              <cms-pagination :total="total" @change="getPages"></cms-pagination>
          </div>

    <el-dialog
        title="批量导入"
        :visible.sync="dialogVisible"
        width="30%"
        height="160"
        :before-close="handleClose">
      <el-button type="success" icon="el-icon-plus" @click="downloadTemplate">模板下载</el-button>

      <el-upload
          class="upload-attach"
          :action=$store.state.sys.memberUploadExcel
          :data="data"
          :multiple="false"
          :limit="1"
          name="uploadFile"
          :auto-upload="true"
          :before-upload="beforeAvatarUpload"
          :on-success="onSuccess"
          :on-error="onError"
          :show-file-list="true"
          :file-list="fileList"
          ref="upload">
        <el-button type="primary">
          导入文档
        </el-button>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关  闭</el-button>
      </span>
    </el-dialog>
  </section>

</template>

<script>
import listMixins from '@/mixins/list'

import { getRand } from "@/untils/random";
import { signParams } from "@/untils/sign";
var rand = getRand();

export default {
    mixins:[listMixins],
  props: {
    //是否只能上传文档类型
    isDoc: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      params: {//只需要业务参数
        queryUsername: "",
        queryEmail: "",
        queryGroupId: "",
        queryStatus: "",
        volunteerStatus:"",
        pageNo: "",
        pageSize: "",
      },
      uploadParams:{
        appId: process.env.appId,
        sessionKey: localStorage.getItem("sessionKey"),
        type: "attach",
        nonceStr: rand,
        uploadPath: this.uploadPath
      },
      obj: {
        fileName: "",
        fileSize: "",
        uploadPath: ""
      },
      selectFiles: 0,
      successFiles: 0,
      data: {},
      fileList: [],
      multipleList:[],
      dialogVisible: false
    };
  },
  created(){
     this.initTableData(this.$api.memberList,this.params);
     this.data = signParams(this.uploadParams, process.env.appKey);
  },
  methods:{
    downloadTemplate(){
      window.location.href="/static/template/学生上传表.xlsx";
    },
    handleClose(done) {
      this.$refs["upload"].clearFiles();
    },
    closeDialog(){
      this.$refs["upload"].clearFiles();
      this.dialogVisible = false;
    },
    beforeAvatarUpload(file) {
      let isUpLoad = false;
      if (this.isDoc) {
        if (!this.isMIME(file.name)) {
          this.$message.error("只能上传xls,xlsx");
          isUpLoad = false;
        } else {
          isUpLoad = true;
        }
      } else {
        isUpLoad = true;
      }
      return isUpLoad;
    },
    onSuccess(response, file, fileList) {
      //单文件
      alert(response.message);
      this.$refs["upload"].clearFiles();
      this.initTableData(this.$api.memberList,this.params);
    },
    onError(err, file, fileList) {
      alert(err.message);
      this.$refs["upload"].clearFiles();
    },
    isMIME(fileName) {
      //判断类型
      let arr = [
        ".xls",
        ".xlsx",
      ];
      let type = fileName.lastIndexOf(".");
      let index1 = fileName.lastIndexOf(".");
      let index2 = fileName.length;
      let postf = fileName.substring(index1, index2); //后缀名
      if (arr.indexOf(postf) >= 0) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="scss">
.el-dialog__body {
  min-height: 150px;
  height: 150px;
  overflow-x: hidden;
}
.el-dialog__body button{
  margin-bottom: 10px;
}
</style>
